<template>
	<view class="replie_more" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<view class="replie fboxRow" :class="{ backcolor: index == 0 }" v-for="(item, index) in moreReplieList" :key="index">
			<image class="img_tx" :src="item.avatar" mode=""></image>
			<view class="middle_box">
				<view class="fboxRow">
					<view class="flex1">
						<p>{{ item.realName }}</p>
						<p class="font24 color-6B707C">{{ dateFormat(item.gmtCreate) }}</p>
					</view>
					<view class="last_box" v-if="index != 0">
						<view class=""><text class="bw-a-zu3304 bwfont" @tap="openComment(item)"></text></view>
						<view class="fboxRow" style="align-items: center;" @tap="tapLike(item)">
							<u-icon v-if="item.isLike == 0" name="thumb-up" color="#acb4c7" size="24"></u-icon>
							<u-icon v-else name="thumb-up-fill" color="#E8CDA7" size="24"></u-icon>
							<text :style="{ color: item.isLike == 0 ? '#acb4c7' : '#E8CDA7' }">{{ item.likeNum }}</text>
						</view>
					</view>
				</view>

				<text class="text_pz">
					{{ item.replyMemberId != detail.memberId && index != 0 ? '@' + item.replyRealName + '：' + item.replyContent : item.replyContent }}
				</text>
			</view>
		</view>

		<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<view class="fboxRow" style="width: 100%;">
				<view class="ipt_box" @tap="openComments"><text>写下您的回复吧</text></view>
				<view class="cz_right flex1">
					<view><text>发布</text></view>
				</view>
			</view>
		</u-tabbar>

		<u-overlay :show="plShow" @click="closePuperBottom"></u-overlay>
		<view class="puper_bottom" v-if="plShow">
			<view><u--textarea style="border:none" v-model="plContent" :placeholder="placeholderContent"></u--textarea></view>
			<u-button @click="commentReply" class="btn" type="primary" text="发布"></u-button>
		</view>
	</view>
</template>

<script>
import { circleReplies, commentReply, replyUnlike, replyLike } from '@/api/h5.js';
import { dateFormat } from '@/static/js/common.js';
export default {
	data() {
		return {
			dateFormat,
			theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
			commentId: '',
			isLoading: true,
			moreReplieList: [],
			detail: {},
			plShow: false,
			placeholderContent: '',
			plContent: '',
			userInfo: {},
			plDetail: {},
			page: {
				current: 1,
				size: 20,
				total: 0
			}
		};
	},
	onLoad(option) {
		if (uni.getStorageSync('bw_user_temp')) {
			this.userInfo = JSON.parse(uni.getStorageSync('bw_user_temp'));
		}
		const obj = getApp().globalData.moreReplie;
		if (Object.keys(obj).length != 0) {
			this.detail = getApp().globalData.moreReplie;
			this.commentId = this.detail.commentId;
			this.detail.replyContent = this.detail.commentContent;
		}
		this.getMoreReplies();
		uni.setNavigationBarTitle({
			title: `更多回复`
		});
	},
	onReachBottom() {
		if (this.page.size * this.page.current <= this.page.total) {
			this.page.size += 10;
			this.getMoreReplies();
		}
	},
	onPullDownRefresh() {
		this.page.size = 20;
		this.getMoreReplies();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		tapLike(data) {
			let obj = {
				busMemberId: data.memberId,
				businessId: data.commentReplyId,
				memberId: this.userInfo.memberId
			};
			if (data.isLike == 0) {
				replyLike({ ...obj }).then(res => {
					data.isLike = 1;
					data.likeNum++;
				});
			} else {
				replyUnlike({ ...obj }).then(res => {
					data.isLike = 0;
					data.likeNum--;
				});
			}
		},
		openComment(data) {
			this.plShow = true;
			this.plDetail = data;
			this.placeholderContent = `回复@${data.realName}`;
		},
		openComments() {
			this.plShow = true;
			this.plDetail = this.detail;
			console.log(this.plDetail);
			this.placeholderContent = '我来评论';
		},
		closePuperBottom() {
			this.plShow = false;
		},
		// 回复别人的评论
		commentReply() {
			let obj = {
				avatar: this.userInfo.avatar,
				commentId: this.plDetail.commentId,
				memberId: this.userInfo.memberId,
				realName: this.userInfo.realName,
				replyContent: this.plContent,
				replyMemberId: this.plDetail.memberId,
				replyRealName: this.plDetail.realName,
				replyType: '0'
			};
			commentReply({ ...obj }).then(res => {
				uni.showToast({
					icon: 'none',
					title: '评论成功'
				});
				this.getMoreReplies();

				this.plShow = false;
				this.plContent = '';
			});
		},
		// 获取更多回复
		getMoreReplies() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
			circleReplies({ ...this.page, commentId: this.commentId })
				.then(res => {
					if (res.data) {
						this.moreReplieList = res.data.list;
						this.moreReplieList.unshift(this.detail);
						this.page.total = res.data.total;
					}
				})
				.finally(() => {
					uni.hideLoading();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-tabbar__content {
	background-color: var(--viewBgColor);
	border: none;
}
::v-deep .u-textarea{
	background-color: var(--controllerBgColor);
}
.replie_more{
	min-height: 100vh;
}
.cz_right {
	display: flex;
	align-items: center;
	padding: 0 40rpx;
	> view {
		color: var(--titleFontColor);
		flex: 1;
		text-align: center;
	}
}
.ipt_box {
	background: var(--bottomPopupBackTwoColor);
	height: 65rpx;
	width: 546rpx;
	color: #6b707c;
	padding: 20rpx;
	margin-top: 18rpx;
	margin-left: 20rpx;
	border-radius: 8rpx;
}
.puper_bottom {
	position: fixed;
	bottom: 0;
	height: 300rpx;
	background-color: var(--darkViewBgColor);
	width: 100%;
	z-index: 99999;
	padding: 20rpx;
	.btn {
		width: 120rpx;
		float: right;
		height: 50rpx;
		margin-top: 20rpx;
		border-radius: 8rpx;
		background: linear-gradient(270deg, #e8cda8 0%, #f4e6cf 100%);
		border: none;
		color: #141720;
	}
}
.text_pz {
	line-height: 36rpx;
	font-size: 30rpx;
	color: var(--contentFontDarkColor);
}
.backcolor {
	background-color: var(--viewBgColor);
}
.color-6B707C {
	color: var(--contentFontFourColor);
}
.replie {
	border-bottom: 1px solid #EEF0F6;
	padding: 40rpx;
	.img_tx {
		margin-right: 20rpx;
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
		flex-shrink: 0;
	}
	.middle_box {
		flex: 1;
		p {
			margin-bottom: 10rpx;
		}
		.last_box {
			display: flex;
			flex-direction: row;
			align-items: center;
			> view {
				color: #acb4c7;
				&:first-child {
					margin-right: 40rpx;
				}
			}
		}
	}
}
</style>
